<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hue interpolation playground</title>
<link rel="stylesheet" href="style.css">

</head>
<body>

<fieldset>
	<legend>Algorithm</legend>

	<label>
		<input type="radio" name="algorithm" value="current-spec">
		Current spec
	</label>

	<label>
		<input type="radio" name="algorithm" value="new" checked>
		New
	</label>
</fieldset>

<div id="inputs">
	<label>
		θ<sub>1</sub> = <input type="number" id="theta1" value="360" step="1">deg
	</label>
	<label>
		θ<sub>2</sub> = <input type="number" id="theta2" value="720" step="1">deg
	</label>
</div>

<output id="output">
	<p>Normalized angles:</p>
	<p>
		θ<sub>1</sub> = <span id="theta1n"></span>deg
		θ<sub>2</sub> = <span id="theta2n"></span>deg
	</p>
	<div id="gradient"></div>
</output>

<script src="index.js" type="module"></script>

</body>
</html>